<template>
  <div style="height: 6vh; padding: 10px 20px; background-color: #fff; overflow: hidden;">
    <span style="font-size: 20px;line-height: 60px;">报废申请表</span>
    <el-button type="primary" style="margin-top: 10px; float: right;" @click="Input">录入报废申请</el-button>
  </div>
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width: 1000px; padding: 40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="资产ID">
            <el-input v-model="saveInfo.asset_id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报废原因">
            <el-input type="textarea" v-model="saveInfo.reason"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="审批人ID">
            <el-input v-model="saveInfo.approval_by_id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-select v-model="saveInfo.status">
              <el-option label="待定" value="待定"/>
              <el-option label="已批准" value="已批准"/>
              <el-option label="已拒绝" value="已拒绝"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="图片路径">
            <el-input v-model="saveInfo.image_path"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </template>
  </el-dialog>
  <el-card style="margin: 20px;">
    <el-form style="padding-top:10px;">
      <el-row :gutter="30">
        <el-col :span="5">
          <el-form-item label="资产ID" style="width: 290px;">
            <el-input v-model="searchFrom.asset_id" placeholder="请输入资产ID" @keydown.enter="select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="状态" style="width: 290px;">
            <el-select v-model="searchFrom.status" placeholder="请选择状态">
              <el-option label="待定" value="待定"/>
              <el-option label="已批准" value="已批准"/>
              <el-option label="已拒绝" value="已拒绝"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="select">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-card style="margin:20px;">
    <el-table :data="disposalData" stripe>
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="asset_id" label="资产ID" align="center"/>
      <el-table-column prop="reason" label="报废原因" align="center"/>
      <el-table-column prop="approval_date" label="审批日期" align="center"/>
      <el-table-column prop="approval_by_id" label="审批人ID" align="center"/>
      <el-table-column prop="status" label="状态" align="center"/>
      <el-table-column prop="image_path" label="图片路径" align="center"/>
      <el-table-column prop="create_time" label="创建时间" align="center"/>
      <el-table-column prop="update_time" label="更新时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="del(scope.row.id, scope.row.status)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import qs from "qs";

const dialogTitle = ref('录入报废申请');
const dialogVisible = ref(false);
const disposalData = ref([]);
const saveInfo = ref({
  asset_id: '',
  reason: '',
  approval_by_id: '',
  status: '待定',
  image_path: ''
});
const searchFrom = ref({
  asset_id: '',
  status: ''
});

// 加载数据的方法
const select = () => {
  let data = qs.stringify(searchFrom.value);
  axios.get(BASE_URL + '/v1/disposal/select?' + data)
      .then((response) => {
        if (response.data.code === 2000) {
          disposalData.value = response.data.data;
        }
      })
}

// 清空搜索条件的方法
const resetSearch = () => {
  searchFrom.value = {
    asset_id: '',
    status: ''
  }
  select();
}

// 编辑、删除、保存和关闭弹窗的方法
const edit = (id) => {
  // 实现逻辑...
}
const del = (id, status) => {
  // 实现逻辑...
}
const save = () => {
  // 实现逻辑...
}
const handleClose = () => {
  dialogVisible.value = false;
  clear();
}

const Input = () => {
  dialogVisible.value = true;
  dialogTitle.value = "录入报废申请";
}

onMounted(() => {
  select();
})

const clear = () => {
  saveInfo.value = {
    asset_id: '',
    reason: '',
    approval_by_id: '',
    status: '待定',
    image_path: ''
  }
}
</script>

<style scoped>
/* 可以根据需要自定义样式 */
</style>